<script>
import {ref} from "vue"
import { reactive, toRefs } from '@vue/reactivity'
import { useRouter,useRoute} from 'vue-router'
import { useStore } from '../store'
import { Toast } from 'vant'
// import { Toast } from 'vant'
// import { getJsonshop } from "../api/shop.js";
    export default {
        setup() {
            let router=useRouter()
            let route=useRoute()
            let dataFun=reactive({
                // num:0,
                car:null,
                show:true,
                zong:"0.00",
                settlement:0,
                type:1,
                id:null,
                addressLength:null,
                choseplace:null,
                user:null,
                phone:null,
                province:null,
                city:null,
                area:null,
                Detailedaddress:null,
            })
            let store=useStore()
            dataFun.num=store.shopnum
            dataFun.addressLength=store.address
            let shopList =ref(null);//商品列表

            let go=()=>{
                router.go(-1)
            }
            function getData(){
                dataFun.id=route.query.id
                console.log(dataFun.id);
                console.log(dataFun.addressLength.length);
                if(dataFun.addressLength.length!=0){
                    choseaddress()
                }
            }
            getData()
            

            let show =ref(false);
            const showPopup = () => {//弹出层
                if(dataFun.addressLength.length!=0){
                    show.value = true;
                    console.log("a");
                }else{
                        
                    Toast("还没有收货地址喔")
                }
            };

            // 切换支付类型
            // let typeone=()=>{
            //     dataFun.type=1
            // }
            // let typetwo=()=>{
            //     dataFun.type=2
            // }


            // 获取结算的商品
            function settlementgood(){

                if(dataFun.id=="01"){

                    dataFun.car=store.shopcar.filter(item=>{
                        return item.check==true
                    })
                }else if(dataFun.id=="02"){
                    dataFun.car=store.immediatelybuy
                }
            }

            // 加数量
            let add=(shopid)=>{
                let index= store.immediatelybuy.findIndex(item=>{
                    return item.shopid==shopid
                })

                store.immediatelybuy[index].value+=1
                store.shopnum+=1
                dataFun.num=store.shopnum
                all()
            }

            // 减数量
            let jian=(shopid)=>{
                let index= store.immediatelybuy.findIndex(item=>{
                    return item.shopid==shopid
                })

                if(store.immediatelybuy[index].value<=1){
                    store.immediatelybuy[index].value=1
                }else{

                    store.immediatelybuy[index].value-=1
                    store.shopnum-=1
                    dataFun.num=store.shopnum
                }
                all()
            }

            // 添加、修改地址
            let address=()=>{
                router.push({
                    path:"/ShipAddress",
                    
                })
            }

            function choseaddress(){//选择地址
                dataFun.choseplace=dataFun.addressLength.filter(item=>{
                    return item.check==true
                })
                dataFun.choseplace=dataFun.choseplace[0]
                dataFun.user=dataFun.choseplace.user
                dataFun.phone=dataFun.choseplace.phone
                dataFun.province=dataFun.choseplace.province
                dataFun.city=dataFun.choseplace.city
                dataFun.area=dataFun.choseplace.area
                dataFun.Detailedaddress=dataFun.choseplace.Detailedaddress
                // console.log(dataFun.choseplace);
            }

            // 提交订单
            let Submit=()=>{
                if(dataFun.addressLength.length!=0){
                    console.log("a");
                }else{
                        
                    Toast("还没有收货地址喔")
                }
            }

            // 不结算
            let cancel=()=>{
                if(dataFun.id=="01"){
                    // store.order=store.shopcar
                   store.shopcar.forEach(item=>{
                         item.payment="06"
                         store.noorder.push(JSON.parse(JSON.stringify(item)))
                         store.shopnum-=item.value
                    })
                    store.shopcar=[]
                    // store.order=store.shopcar
                }else if(dataFun.id=="02"){
                    
                     store.immediatelybuy.forEach(item=>{
                        // store.order.push(item)
                        item.payment="06"
                         store.noorder.push(JSON.parse(JSON.stringify(item)))
                    })
                }
                show.value = false;
                router.push({
                    path:"/shopOrder",
                    query:{
                        active:0
                    }
                })
            }

            // 结算
            let yes=()=>{
                if(dataFun.id=="01"){
                    // store.order=store.shopcar
                    store.shopcar.forEach(item=>{
                        item.payment="07"
                        store.order.push(JSON.parse(JSON.stringify(item)))
                        store.shopnum-=item.value
                    })
                    store.shopcar=[]
                    //  store.order=JSON.parse(JSON.stringify(store.shopcar))
                    // store.order=store.shopcar
                }else if(dataFun.id=="02"){
                    store.immediatelybuy.forEach(item=>{
                        item.payment="07"
                         store.order.push(JSON.parse(JSON.stringify(item)))
                    })
                    // store.order= store.immediatelybuy
                }
                show.value = false;
                router.push({
                    path:"/shopOrder",
                    query:{
                        active:1
                    }
                })
            }
            
            
            // 计算总价格
            function all(){
                // console.log(dataFun.car);
                // 总价格
                if(dataFun.id=="01"){

                    dataFun.zong=dataFun.car.reduce((total,item)=>{
                        if(item.check==true){
                            return total + item.value * item.newprice
                        }else{
                            return total
                        }
                    },0)
                    dataFun.zong=dataFun.zong.toFixed(2)
    
                    // 数量
                    dataFun.settlement=dataFun.car.reduce((total,item)=>{
                        if(item.check==true){
                            return total + item.value
                        }else{
                            return total
                        }
                    },0)
                }else if(dataFun.id=="02"){
                    dataFun.zong=dataFun.car.reduce((total,item)=>{
                        
                            return total + item.value * item.newprice
                    },0)
                    dataFun.zong=dataFun.zong.toFixed(2)
    
                    // 数量
                    dataFun.settlement=dataFun.car.reduce((total,item)=>{
                            return total + item.value
                    },0)
                }
            }


            
            settlementgood()
            all()
            return {
                ...toRefs(dataFun),
                go,
                // goods,
                shopList,
                add,
                jian,
                address,
                // typeone,
                // typetwo,
                Submit,
                show,
                showPopup,
                cancel,
                yes,
                
            }
        },
    }
</script>


<template>
    <div class="ConfirmOrder">
        <div class="wrapper">
            <div class="header">
                <div class="header_left">
                    <div class="icon_coo icon-a-ziyuan558" @click="go"></div>
                    <div class="head_name">确认订单</div>
                </div>
            </div>

            <p class="ensure">豆果正品承诺，质量问题/7天退款</p>
            
            <!-- 添加收货地址 -->
            <div class="address" @click="address">
                <div class="none" v-show="addressLength.length==0">
                    <div class="newly icon_coo icon-jia_icon"></div>
                    <p>添加收货地址</p>
                </div>
                <div class="place" v-show="addressLength.length!=0">
                    <div class="location_left">
                        <div class="location_left_top" >
                            <div class="name">收件人：{{user}}</div>
                            <div class="tel">{{phone}}</div>
                        </div>
                        <div class="location_left_bottom">
                            <div class="ground">收货地址：{{province}}{{city}}{{area}}{{Detailedaddress}}</div>
                        </div>
                    </div>
                    <div class="location_center icon_coo icon-qianjin"></div>
                </div>
            </div>

            <!-- 支付方式 -->
            <div class="Paymentmethod">
                <div class="wx" @click="type=1">
                    <div class="wx_left">
                        <img :src="require('../assets/img/ic_wx_pay.webp')" alt="">
                        <p>微信支付</p>
                    </div>
                    <div :class="['wx_right','icon_coo',type==1?'icon-xuanzhong':'']"></div>
                </div>
                <div class="wx" @click="type=2">
                    <div class="wx_left">
                        <img :src="require('../assets/img/ic_zfb_big.webp')" alt="">
                        <p>支付宝支付</p>
                    </div>
                    <div :class="['wx_right','icon_coo',type==2?'icon-xuanzhong':'']"></div>
                </div>
            </div>

            <!-- 加购的商品 -->
            <div class="buyshop">
                <ul>
                    <li v-for="item in car" :key="item.shopid">
                        <div class="buyshop_center">
                            <div class="img">
                                <img :src="item.url" alt="">
                            </div>
                            <div class="word">
                                <div class="word_title">{{item.title}}</div>
                                <div class="number" v-show="id!='01'">
                                    <div class="jian" @click.stop="jian(item.shopid)">-</div>
                                    <div class="digit">{{item.value}}</div>
                                    <div class="add" @click.stop="add(item.shopid)">+</div>
                                </div>
                            </div>
                        </div>
                        <div class="buyshop_right">
                            <div class="price">
                                <div class="newprice">￥{{item.newprice}}</div>
                            <div class="oldprice"><del>￥{{item.oldprice}}</del></div>
                            </div>
                            <div class="del" v-show="show">x{{item.value}}</div>
                        </div>
                    </li>
                </ul>
                <p class="Subtotal">小计(共{{settlement}}件)</p>
            </div> 

            <!-- 结算详情 -->
            <div class="SettlementDetails">
                <ul>
                    <li>
                        <p>商品总额：</p>
                        <p>￥{{zong}}</p>
                    </li>
                    <li>
                        <p>运费:</p>
                        <p>￥0.00</p>
                    </li>
                    <li>
                        <p>总计：</p>
                        <p>￥{{zong}}</p>
                    </li>
                </ul>
            </div>

            <p class="no"></p>

            <!-- 底部提交 -->
            <div class="tarbar">
                <div class="tarbar_left">
                    <div class="tblbox">免运费</div>
                    <p>应付:<strong>￥{{zong}}</strong></p>
                </div>
                <div  class="btn" @click="showPopup">提交订单</div>
            </div>
           
           <div class="pop">
                <van-popup v-model:show="show" >
                    <p>确认提交订单</p>
                    <div class="btn">
                        <div class="nobtn" @click="cancel">取消</div>
                        <div class="yesbtn" @click.stop="yes">确定</div>
                    </div>
                </van-popup>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.ConfirmOrder{
    height: 100%;
    .wrapper{
        height: 100%;
        background-color: #f1f1f1;
        .header{
            position: fixed;
            left: 0;
            top: 0;
            background-color: #fff;
            z-index: 5;
            width: 100%;
            // padding: 0 12px;
            height: 50px;
            border-bottom: 1px solid rgb(248, 235, 207);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .header_left{
                font-size: 18px;
                padding-left: 16px;
                display: flex;
                align-items: center;
                // .icon-a-ziyuan558{}
                .head_name{
                    font-weight: 600;
                    font-size: 18px;
                    padding-left: 30px;
                }
            }
        }
        .ensure{
            text-align: center;
            color: #999;
            font-size: 12px;
            padding: 62px 0 10px 0;
        }

        .address{
            position: relative;
            // height: 70px;
            background-color: #fff;
            margin-bottom: 10px;
            .none{
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 20px;
                .newly{
                    color: #feca3e;
                    font-size: 30px;
                }
                p{
                    color: #999;
                    font-size: 20px;
                    padding-left: 16px;
                }
            }
            .place{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 14px 16px;
                .location_left{
                    flex: 1;
                    .location_left_top{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 14px;
                        padding-bottom: 12px;
                    }
                    .location_left_bottom{
                        display: flex;
                        align-items: center;
                        .mo{
                            font-size: 12px;
                            color: #feca3e;
                        }
                        .ground{
                            font-size: 13px;
                        }
                    }
                }
                .location_center{
                    margin-left: 20px;
                    color: #999;
                }
            }

            &::before{

                z-index: 1;
                position: absolute;
                right: 0;
                top: 0;
                left: 0;
                height: 2px;
                background: repeating-linear-gradient(-45deg,var(--van-warning-color) 0,var(--van-warning-color) 20%,transparent 0,transparent 25%,var(--van-primary-color) 0,var(--van-primary-color) 45%,transparent 0,transparent 50%);
                background-size: 80px;
                content: "";
            }
            &::after{

                z-index: 1;
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0;
                height: 2px;
                background: repeating-linear-gradient(-45deg,var(--van-warning-color) 0,var(--van-warning-color) 20%,transparent 0,transparent 25%,var(--van-primary-color) 0,var(--van-primary-color) 45%,transparent 0,transparent 50%);
                background-size: 80px;
                content: "";
            }
        }
        .Paymentmethod{
            background-color: #fff;
            margin-bottom: 10px;
            .wx{
                padding:  12px 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #ccc;
                .wx_left{
                    display: flex;
                    align-items: center;
                    img{
                        width:30px;
                    }
                    p{
                        padding-left: 10px;
                    }
                }
                .wx_right{
                    width: 16px;
                    height: 16px;
                    border: 1px solid #999;
                    border-radius: 50%;
                }
                .wx_right.icon-xuanzhong{
                    color: #feca3e;
                    font-size: 18px;
                    text-align: center;
                    line-height: 16px;
                    border: 1px solid #feca3e;
                }
            }
        }

        .buyshop{     
            padding:  0px 16px;
            background-color: #fff;
            margin-bottom: 10px;
            ul{
                // padding-bottom: 50px;
                li{
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    border-bottom: 1px solid #ccc;
                    padding: 16px 0;
                    .buyshop_center{
                        display:flex;
                        align-items: center;
                        .buyshop_left{
                            width: 16px;
                            height: 16px;
                            border: 1px solid #999;
                            border-radius: 50%;
                        }
                        .buyshop_left.icon-xuanzhong{
                            color: #feca3e;
                            font-size: 18px;
                            text-align: center;
                            line-height: 16px;
                            border: 1px solid #feca3e;
                        }
                        .img{
                            margin:0 8px 0 0px;
                            width: 58px;
                            height: 58px;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .word{
                            display: flex;
                            flex-direction: column;
                            height: 58px;
                            align-items: flex-start;
                            justify-content: space-between;
                            .word_title{
                                font-size: 12px;
                                width: 130px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            .number{
                                display: flex;
                                text-align: center;
                                line-height: 22px;
                                .jian{
                                    width: 22px;
                                    height: 22px;
                                    // background-color: #ccc;
                                    border: 1px solid #ccc;
                                }
                                .digit{
                                    width: 22px;
                                    height: 22px;
                                    border: 1px solid #ccc;
                                    border-left: 0;
                                    font-size: 14px;
                                }
                                .add{
                                    width: 22px;
                                    height: 22px;
                                    border: 1px solid #ccc;
                                    border-left: 0;
                                }
                            }
                        }
                    }
                    .buyshop_right{
                        display: flex;
                        height: 58px;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: flex-end;
                        .price{
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            .newprice{
                                font-size: 13px;
                                color: #f51505;
                            }
                            .oldprice{
                                font-size: 10px;
                                color: #999;
                            }
                        }
                        .del{
                            color: #999;
                        }
                    }
                }
            }
            p.Subtotal{
                text-align: right;
                font-size: 12px;
                color: #999;
                padding: 12px 0;
            }

        }
        .SettlementDetails{
            background-color: #fff;
            padding: 8px 16px;
            margin-bottom: 10px;
            ul{
                li{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 5px 0;
                    p{
                        &:nth-child(1){
                            font-size: 14px;
                        }
                        &:nth-child(2){
                            color: #f51505;
                            font-size: 13px;
                        }
                    }
                }
            }
        }

        p.no{
            height: 50px;
            background-color: #fff;
        }
        .tarbar{
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            box-shadow: 0 3px 14px 2px rgb(0 0 0 / 12%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 50px;
            background-color: #fff;
            .tarbar_left{
                display: flex;
                align-items: center;
                padding-left: 16px;
                .tblbox{
                    color: #999;
                    font-size: 12px;
                }
                .tblbox.icon-xuanzhong{
                    color: #feca3e;
                    font-size: 18px;
                    text-align: center;
                    line-height: 16px;
                    border: 1px solid #feca3e;
                }
                p{
                    font-size: 14px;
                    padding-left: 8px;
                    strong{
                        color: #f51505;
                    }
                }
            }
            
            .btn{
                margin-right: 16px;
                background-color: #feca3e;
                font-weight: 600;
                height: 35px;
                // width: 100px;
                padding: 0 25px;
                text-align: center;
                line-height: 35px;
                border-radius: 18px;
                font-size: 14px;
            }
        }
        .pop{
            
            p{
                width: 200px;
                padding: 20px;
                text-align: center;
            }
            .btn{
                padding: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .nobtn{
                    color: #999;
                }
                .yesbtn{
                    color: #f3410b;
                }
            }
        }
    }
}
</style>